<template>
  <div id="app">
    <div class="rowClearfix">
      <div style="display: flex;align-items: center;">
<!--        <img height="70px" alt="logo" src="@/assets/image/home/logo.png"/>-->
        <div class="sys-name"><span class="base">vlncRNAbase</span> Database for virus-encoded lncRNAs
        </div>
      </div>

<!--      <div class="right">-->
<!--&lt;!&ndash;        <div class="sys-name"><span class="base">VRPbase</span> Database for Viral Transcripts</div>&ndash;&gt;-->
<!--        <img width="540px" alt="logo" src="@/assets/image/home/bannar.png"/>-->
<!--      </div>-->
    </div>
    <div class="nav-box">
      <router-link class="a" :class="{active: active === 'Home'}" :to="{path:'/home'}">Home</router-link>
      <div class="a browse" :class="{active: active === 'Virus' ||
      active === 'BrowseHost'||
      active === 'HostOverviwe'||
      active === 'Experiments'}">
        Browse
        <ul class="sub-item otherWidth">
          <router-link class="item" :to="{path:'/virus'}">Virus</router-link>
          <router-link class="item" :to="{path:'/browse/host'}">Host</router-link>
          <router-link class="item" :to="{path:'/browse/experiments'}">Experiments</router-link>
          <!--          <router-link class="item" :to="{path:'/rnaType'}">RNA type</router-link>-->
        </ul>
      </div>

      <router-link class="a" :class="{active: active === 'ExpRNA'}" :to="{path:'/expRNA',query: {rnaType: 'lncRNA'}}">Expression</router-link>

<!--      <div class="a browse" :class="{ active: active === 'ExpmRNA'||-->
<!--      active === 'ExplncRNA'||-->
<!--      active === 'ExpsRNA'||-->
<!--      active === 'ExpRNA'||-->
<!--      active === 'ExpcircRNA'}">-->
<!--        Expression-->
<!--        <ul class="sub-item">-->
<!--          <router-link class="item" :to="{path:'/expRNA',query: {rnaType: 'mRNA'}}">mRNA</router-link>-->
<!--          <router-link class="item" :to="{path:'/expRNA',query: {rnaType: 'lncRNA'}}">lncRNA</router-link>-->
<!--&lt;!&ndash;          <router-link class="item" :to="{path:'/expRNA',query: {rnaType: 'circRNA'}}">circRNA</router-link>&ndash;&gt;-->
<!--&lt;!&ndash;          <router-link class="item" :to="{path:'/expRNA',query: {rnaType: 'sRNA'}}">sRNA</router-link>&ndash;&gt;-->
<!--        </ul>-->
<!--      </div>-->


      <router-link class="a" :class="{active: active === 'SearchQuick'}" :to="{path:'/search/quick'}">Search</router-link>

<!--      <div class="a browse" :class="{active: active === 'SearchQuick'}">-->
<!--        Search-->
<!--        <ul class="sub-item otherWidth">-->
<!--          <router-link class="item" :to="{path:'/search/quick'}">Quick search</router-link>-->
<!--          <router-link class="item" :to="{path:'/search/sequence'}">By sequence</router-link>-->
<!--        </ul>-->
<!--      </div>-->

      <router-link class="a" :class="{active: active === 'InteractionHost'}" :to="{path:'/interaction/host'}">Interaction</router-link>

<!--      <div class="a browse" :class="{active:-->
<!--      // active === 'InteractionVirus' ||-->
<!--       active === 'InteractionHost' ||-->
<!--       active === 'InteractionPredict' ||-->
<!--       active === 'InteractionNodeView' }">-->
<!--        Interaction-->
<!--        <ul class="sub-item">-->
<!--          <router-link class="item" :to="{path:'/interaction/virus'}">Virus - Virus</router-link>-->
<!--          <router-link class="item" :to="{path:'/interaction/host'}">Virus - Host</router-link>-->
<!--          <router-link class="item" :to="{path:'/interaction/predict'}">Predict</router-link>-->
<!--        </ul>-->
<!--      </div>-->
      <router-link class="a" :class="{active: active === 'StatisticIndex'}" :to="{path:'/statistic/index'}">Statistic</router-link>

<!--      <div class="a browse" :class="{active: active === 'StatisticVirus' || active === 'StatisticHost'}">-->
<!--        Statistic-->
<!--        <ul class="sub-item">-->
<!--          <router-link class="item" :to="{path:'/statistic/virus'}">Virus</router-link>-->
<!--          <router-link class="item" :to="{path:'/statistic/host'}">Host</router-link>-->
<!--        </ul>-->
<!--      </div>-->
      <router-link class="a" :class="{active: active === 'Download'}" :to="{path:'/download'}">Download</router-link>
      <router-link class="a" :class="{active: active === 'Help'}" :to="{path:'/help'}">Help</router-link>
    </div>
      <div class="mianWarp">
          <keep-alive>
              <router-view class="subWarp" v-if="$route.meta.isKeep"/>
          </keep-alive>
          <router-view class="subWarp" v-if="!$route.meta.isKeep" ref="view" :key="key"/>
      </div>

    <div class="foot-box">

      <div class="footer">
        <div class="item">
          <div>
            <div class="img-box">
              <img :src="require('@/assets/image/diqiu.png')">
            </div>
            <p>Access statistics</p>
          </div>
          <div class="earth">
            <div class="map-statistic">
              <map-statistic/>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="icon">
            <div class="img-box">
              <img :src="require('@/assets/image/reference.png')">
            </div>
            <p>Cite Us</p>
          </div>
          <div class="info">
            {{info.citeUs}}
          </div>
        </div>
        <div class="item">
          <div class="icon">
            <div class="img-box">
              <img :src="require('@/assets/image/lianjie.png')">
            </div>
            <p>Useful links</p>
          </div>
          <div class="info">
            <ul>
              <li v-for="(n, i) in links" :key="i">
                <a :href="n.url" target="_blank">{{n.title}}</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="item">
          <div class="icon">
            <div class="img-box">
              <img :src="require('@/assets/image/msg.png')">
            </div>
            <p>Contact</p>
          </div>
          <div class="info">
            <span>{{info.connectName}}</span><br>
            <span>E-mail: {{info.connectEmail}}</span><br>
            <span>Address: {{info.connectAddress}}</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {getInfo, listLinks} from "@/api/home";

export default {
  name: "home",
  components: {
    'map-statistic': {
      render: function (createElement) {
        return createElement(
            'script', {
              attrs: {
                type: 'text/javascript',
                src: '//rf.revolvermaps.com/0/0/5.js?i=5zj0zczeplc&amp;m=8&amp;c=007eff&amp;cr1=baff00',
                async: 'async'
              }
            }
        )
      }
    }
  },
  props: {},
  watch: {
    $route(to) {
      this.active = to.name
      this.isSearchHide = to.meta.search
    }
  },
  computed: {
    key() {
    //   // 使用router-view时，如果在相同路由之间跳转，默认在跳转路由时会采用缓存策略,
    //   // 并不会刷新当前路由组件。即mounted,beforeDestory等钩子函数并不会触发。
    //   // 如果想强制刷新，可以在根路由上为其分配一个唯一key。
    //   //采用$route.fullpath作为其唯一key。这样vue就回认为内部路由每个都是不同的路由，在跳转时便会强制刷新组件
    //   // return this.$route.name + new Date()
      this.keyIdx += 1
      return this.$route.fullPath ? ("page_" + this.keyIdx) : ("page_" + this.keyIdx)
    }
  },
  data() {
    return {
      val: '',
      active: '',
      citeUs: '',
      connect: [],
      links: [],
      isSearchHide: false,
      info: {},
      keyIdx: 0,
    }
  },
  created() {
    this.getInfo()
    this.getLinks()
  },
  mounted() {
  },
  methods: {
    async getInfo() {
      const res = await getInfo();
      this.info = res.data
    },
    async getLinks() {
      const res = await listLinks()
      this.links = res.data
    },
  }
}
</script>

<style lang="stylus">
#app {
  min-height 100%
  font-family Arial, Verdana, Geneva, Helvetica, sans-serif
  display: flex;
  flex-direction: column;
  align-items center
}

.mianWarp {
  flex 1
  width 100%
}

  .subWarp {
    margin 0 auto
  }

.browse {
  position relative
  cursor pointer

  &:hover .sub-item {
    display block
  }

  .otherWidth {
    width 200px!important
  }

  .sub-item {
    display none
    box-shadow: 0 0 10px #ddd;
    position absolute
    top: 0
    left 0
    width 100%
    /*padding-top 40px*/
    margin-top: 40px
    z-index 111

    .item {
      display block
      background: #fff;
      text-align center
      line-height 2
      color #11427DFF
      font-weight: 700;
      font-size 18px
      padding 5px

      &:hover {
        background-color #f9f9f9
        color #9c1919
      }
    }

    .active {
      background-color #f9f9f9
      color #9c1919
    }
  }
}

.nav-box {
  height 60px
  font-family 'Arial'
  font-size 18px
  background #11427DFF
  padding 0 25px
  display flex
  align-items flex-end
  width 100%
  box-shadow 0 2px 10px 0 rgba(0,0,0,.1)

  .a {
    color #fff
    padding 0 25px
    height 50px
    line-height 48px
    display inline-block
    font-weight 700
    &:hover {
      background #fff
      color #11427DFF
    }
  }

  .active {
    background: #fff;
    color #11427DFF
  }
}


.rowClearfix {
  width 100%
  min-height 100px
  display flex
  align-items center
  justify-content space-between
  padding 30px 30px
  position relative
  height 104px
  color #fff
  background-color: #03154d

  .sys-name {
    font-family 'Arial'
    margin-left 15px
    font-size 20px
    font-weight 900
    .base {
      font-style: oblique;
      font-size 44px
      font-weight 900
      margin-right 10px
    }
    .last {
      color #fd8508
      font-size 18px
      font-weight 900
    }
  }

  .right {
    display flex
    align-items flex-end
    flex-direction column
  }

  .words-box {
    font-size 46px
    color #11427DFF
    text-align center

    > span {
      font-weight 600
      display block
    }
  }
}



.foot-box {
  width 100%
  margin-top 60px
  border-top 1px solid rgba(240, 240, 240, 0.49)

  .footer {
    width 1170px
    margin 0 auto
    margin-top 50px
    margin-bottom 20px
    display flex
    justify-content space-between
    font-family Times New Roman
  }

  .item {
    width 210px
    .img-box {
      width 88px
      height 88px
      display flex
      align-items center
      justify-content center
      margin 0 auto
      img {
        height 70%
      }
    }
    p {
      text-align center
      font-size 20px
      line-height 1.4
    }
    .icon {
      margin-bottom 40px
    }
    .info {
      font-size 16px
      line-height 1.6
      color #a3a3a2
      li {
        list-style:disc
        word-break: break-word;
      }
    }
  }
}

.split-line {
  margin-top 60px
  width 1170px
  height 1px
  background-color #e0e5ef
}

.earth {
  display flex
  margin-top 20px

  .map-statistic {
    width 200px
    margin 0 auto
  }
}


</style>
